import { size, IFormProps, pageSize, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select } from "antd";
// import moment from 'moment';
const Styles = require("../../styles/index.less");
import * as api from "../../api/api";
import ReleasePointRuleEdit from "../../components/malls/ReleasePointRuleEdit";

export interface IReleasePointRulesPros extends IFormProps {
  mall: any;
}
class ReleasePointRules extends React.PureComponent<
  IReleasePointRulesPros,
  any
> {
  constructor(props) {
    super(props);
  }

  state = {
    visible: false
  };

  componentDidMount() {
    this.getReleasePointRules();
  }

  search = () => {
    this.getReleasePointRules();
  };

  getReleasePointRules = (payload?) => {
    payload = Object.assign({}, this.props.form.getFieldsValue(), {
      ...payload
    });
    this.props.dispatch({
      type: "mall/getReleasePointRules",
      payload
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  edit = (releasePointRule = {}) => {
    this.setVisible(true);
    this.props.dispatch({
      type: "mall/save",
      payload: { releasePointRule }
    });
  };

  setVisible = (visible = false) => {
    this.setState({ visible });
  };

  save = form => {
    let { releasePointRule } = this.props.mall;
    form = Object.assign({}, releasePointRule, form);
    this.props.dispatch({
      type: "mall/saveReleasePointRule",
      payload: {
        form,
        callback: () => {
          this.setVisible();
          this.search();
        }
      }
    });
  };

  remove = (id) => {
    this.props.dispatch({
        type: "mall/removeReleasePointRule",
        payload: {
            form: { id },
            callback: () => {
                this.getReleasePointRules();
            }
        }
    })
}

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const {
      releasePointRule,
      releasePointRules: { items }
    } = this.props.mall;
    const { visible } = this.state;
    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Col span={24}>
            <Form layout="inline">
              <Form.Item>
                <Button
                  size={size}
                  type="primary"
                  loading={loading}
                  onClick={this.search}
                >
                  查询
                </Button>
              </Form.Item>
              <Form.Item>
                <Button size={size} onClick={() => this.edit()}>
                  新增
                </Button>
              </Form.Item>
            </Form>
            <Col span={24}>
              <hr className={Styles.hrBorder} />
              <h3>体验金释放规则列表</h3>
            </Col>
            <Col span={24}>
              <Table
                dataSource={items}
                bordered
                pagination={false}
                rowKey={(record: api.SingleUserMallMallVOReleasePointRulesVO) =>
                  String(record.id)
                }
                loading={loading}
              >
                <Table.Column
                  title="序号"
                  key="no"
                  render={(text, record, index) => {
                    return index + 1;
                  }}
                />
                <Table.Column title="名称" key="name" dataIndex="name" />
                <Table.Column
                  title="普通用户自购"
                  key="normalUserOwnBuyRateView"
                  dataIndex="normalUserOwnBuyRateView"
                />
                <Table.Column
                  title="VIP用户自购"
                  key="vipUserOwnBuyRateView"
                  dataIndex="vipUserOwnBuyRateView"
                />
                <Table.Column
                  title="合伙人自购"
                  key="superVIPUserOwnBuyRateView"
                  dataIndex="superVIPUserOwnBuyRateView"
                />
                <Table.Column
                  title="直推用户给VIP返利"
                  key="directNormalUserToVIPRateView"
                  dataIndex="directNormalUserToVIPRateView"
                />
                <Table.Column
                  title="VIP团队给合伙人返利"
                  key="directNormalUserToSuperVIPRateView"
                  dataIndex="directNormalUserToSuperVIPRateView"
                />
                <Table.Column
                  title="直推合伙人给普通用户返利"
                  key="directSuperVIPUserToNormalUserRateView"
                  dataIndex="directSuperVIPUserToNormalUserRateView"
                />
                <Table.Column
                  title="直推合伙人给VIP返利"
                  key="directSuperVIPUserToVIPRateView"
                  dataIndex="directSuperVIPUserToVIPRateView"
                />
                <Table.Column
                  title="直推合伙人给合伙人返利"
                  key="directSuperVIPUserToSuperVIPRateView"
                  dataIndex="directSuperVIPUserToSuperVIPRateView"
                />
                <Table.Column
                  title="操作"
                  render={(
                    text,
                    record: api.SingleUserMallMallVOPointRulesVO,
                    index
                  ) => {
                    return (
                      <div>
                        <a
                          className={Styles.M_RIGHT}
                          onClick={() => this.edit(record)}
                        >
                          编辑
                        </a>
                        <Popconfirm
                          title="确定删除吗?"
                          onConfirm={() => {
                            this.remove(record.id);
                          }}
                        >
                          <a>删除</a>
                        </Popconfirm>
                      </div>
                    );
                  }}
                />
              </Table>
            </Col>
          </Col>
        </Row>
        {visible ? (
          <ReleasePointRuleEdit
            visible={visible}
            releasePointRule={releasePointRule}
            onSave={this.save}
            onCancel={this.setVisible}
          />
        ) : (
          undefined
        )}
      </Row>
    );
  }
}

export default connect(({ mall, loading: { models: { mall: loading } } }) => ({
  mall,
  loading
}))(Form.create()(ReleasePointRules));
